/* eslint-disable import/no-dynamic-require */
<template>
  <label
    class="m-radio"
    :role="calcMode === 'radio' ? 'radio' : 'checkbox'"
    :class="[
      calcRadioSize ? 'm-radio--' + calcRadioSize : '',
      { 'm-radio--is-checked': calcIsChecked },
      { 'm-radio--is-disabled': calcIsDisabled },
    ]"
    :aria-checked="calcIsChecked"
    :aria-disabled="calcIsDisabled"
    :tabindex="calcTabIndex"
    @keydown.space.stop.prevent="model = calcIsDisabled ? calcModel : label"
  >
    <span class="m-radio__input el-radio__input">
      <!-- <span class="m-radio__inner"></span> -->
      <input
        ref="radio"
        v-model="calcModel"
        :value="label"
        class="m-radio__original"
        :type="calcMode === 'radio' ? 'radio' : 'checkbox'"
        aria-hidden="true"
        :name="name"
        :checked="calcIsChecked"
        :disabled="calcIsDisabled"
        tabindex="-1"
        @focus="focus = true"
        @blur="focus = false"
        @change="handleChange"
      />
    </span>
    <img v-if="calcIsChecked" :src="obj[calcRadioSize]" alt="" />

    <span @keydown.stop>
      <slot></slot>
      <template v-if="!$slots.default">{{ label }}</template>
    </span>
  </label>
</template>
<script>
import Emitter from './index';

export default {
  name: 'MRadio',

  mixins: [Emitter],

  inject: {
    elForm: {
      default: '',
    },

    elFormItem: {
      default: '',
    },
  },

  componentName: 'MRadio',

  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      type: [Array, String, Boolean],
    },
    label: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'small',
    },
  },

  data() {
    return {
      focus: false,
      obj: {
        // eslint-disable-next-line global-require
        mini: require('./assets/Choose@mini.png'),
        // eslint-disable-next-line global-require
        small: require('./assets/Choose@small.png'),
        // eslint-disable-next-line global-require
        medium: require('./assets/Choose@medium.png'),
      },
    };
  },
  computed: {
    // 是否被 MRadioGroup 组件包裹
    calcIsGroup() {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options.componentName !== 'MRadioGroup') {
          parent = parent.$parent;
        } else {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.radioGroup = parent;
          return true;
        }
      }
      return false;
    },
    calcModel: {
      get() {
        return this.calcIsGroup ? this.radioGroup.value : this.value;
      },
      set(val) {
        if (this.calcIsGroup) {
          this.dispatch('MRadioGroup', 'input', [val]);
        } else {
          this.$emit('input', val);
        }
      },
    },
    calcMode() {
      return this.radioGroup ? this.radioGroup.calcMode : 'radio';
    },
    calcElFormItemSize() {
      return (this.elFormItem || {}).calcElFormItemSize;
    },
    calcRadioSize() {
      const temRadioSize =
        this.size || this.calcElFormItemSize || (this.$ELEMENT || {}).size;
      return this.calcIsGroup
        ? this.radioGroup.calcRadioGroupSize || temRadioSize
        : temRadioSize;
    },
    calcIsDisabled() {
      return this.calcIsGroup
        ? this.radioGroup.disabled ||
            this.disabled ||
            (this.elForm || {}).disabled
        : this.disabled || (this.elForm || {}).disabled;
    },
    calcTabIndex() {
      return this.calcIsDisabled ||
        (this.calcIsGroup && this.calcModel !== this.label)
        ? -1
        : 0;
    },
    calcIsChecked() {
      // 单选模式
      if (this.calcMode === 'radio') {
        return this.calcModel === this.label;
      }
      // 多选模式
      return Boolean(this.calcModel.find((item) => item === this.label));
    },
    // calcLogoUrl() {
    //   // eslint-disable-next-line global-require
    //   // return require(`./assets/Choose@${this.calcRadioSize}.png`);
    // },
  },

  methods: {
    handleChange() {
      this.$nextTick(() => {
        this.$emit('change', this.calcModel);
        if (this.calcIsGroup) {
          this.dispatch('MRadioGroup', 'handleChange', this.calcModel);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.m-radio {
  color: #333;
  font-weight: 500;
  line-height: 1;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: 0;
  font-size: 14px;
  // margin-right: 30px;
  background: #ffffff;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 3px;
  &__input {
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
  }
  &--is-checked {
    border: 1px solid #4d84ff;
  }
  &--is-disabled {
    background-color: #f9f9f9;
  }
  &__inner {
    border: 1px solid #ccc;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
  }
  &__original {
    opacity: 0;
    outline: 0;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  &--small {
    width: 172px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    img {
      width: 24px;
      height: 24px;
    }
  }
  &--medium {
    height: 60px;
    width: 258px;
    line-height: 60px;
    font-size: 18px;
    img {
      width: 36px;
      height: 36px;
    }
  }
  &--mini {
    height: 20px;
    width: 86px;
    line-height: 20px;
    font-size: 10px;
    img {
      height: 12px;
      width: 12px;
    }
  }
  img {
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
}
</style>
